<template>
    <div>
        <div class="head-project" id="app_config">
            <div class="title"><span>插件配置</span></div>
            <Dropdown @on-click="configEdit">
                <a href="javascript:void(0)">
                    <Icon type="md-menu" size="18"/>
                </a>
                <DropdownMenu slot="list" style="width: 160px">
                    <DropdownItem v-for="(item, index) in config" :key="item.code" :name="index" style="display: flex;justify-content: space-between">
                        {{item.name}}
                        <Icon v-show="item.active" type="md-checkmark" color="#19be6b" size="16" style="vertical-align: sub;"/>
                    </DropdownItem>
                </DropdownMenu>
            </Dropdown>
        </div>
        <div>
            <div style="margin-bottom: 16px">
                <Tag  type="border" closable v-for="(item, index) in config" :key="item.code" @on-close="configEdit(index)" v-if="item.active">{{item.name}}</Tag>
            </div>
            <div v-for="item in config" :key="item.code" style="margin-bottom: 16px">
                <component v-if="item.active" :is="item.component" :tempApp="tempApp" :ref="item.code"></component>
            </div>
        </div>
    </div>
</template>

<script>
    import plugins from './plugins/plugins'
    export default {
        data(){
            return {
                config: plugins.data
            };
        },
        props:['tempApp'],
        components:{
            ...plugins.components
        },
        computed:{
        },
        created(){
        },
        methods:{
            configEdit(index) {
                this.config[index].active = !this.config[index].active;
            },
            async getData(){
                let arry = [];
                for (let i = 0; i < this.config.length; i++) {
                    if (this.config[i].active) {
                        arry.push(this.$refs[this.config[i].code][0].getData());
                    }
                }
                return {appConfigList: await Promise.all(arry)};
            }
        }
    };
</script>

<style scoped lang="less">
</style>